<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>商品详情页</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/layui/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <style>
        .desc>p{
            font-size: 20px;
            font-weight: 300;
        }
        .product_img{
            background-color: #FFFFFF;
            border-radius: 3px;
            border: 1px solid #e1e1e1;
        }
        .product_info>p{
            margin: 20px 0;
            text-align: right;
        }
        .product_info>.title{
            font-weight: bold;
            text-align: left;
        }
        .size1{
            font-size: 30px;
        }
        .product_info>.price{
            font-weight: 500;
            color: #1e1e1e;
        }
        .size2{
            font-size: 24px;
        }
        .product_info>p>.price1{
            font-weight: bold;
            color: #FF5722;
        }
        .size3{
            font-size: 30px;
        }
    </style>
    <link th:href="@{/css/pinglun.css}" rel="stylesheet" type="text/css"/>
    <style>
        .test{
            height: auto;
            margin: 0 15%;
        }
    </style>
</head>
<body class="site-home">
<!--头部模块-->
<div th:replace="mall/common::head"></div>
<div class="layui-container" id="content">
    <!--商品详情-->
    <div class="layui-row" style="margin-top: 10px;">
        <div class="layui-row" id="product">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <img class="product_img img_responsive" th:src="${product.image}" width="500px" height="400px"  />
            </div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <div class="product_info">
                    <input type="hidden" id="productId" th:value="${product.id}"/>
                    <p th:text="${product.title}" class="title size1"></p>
                    <hr class="layui-bg-red" />
                    <p class="price size2">二手价：<span class="price1 size3" th:text="${product.shopPrice}"></span></p>
                    <hr class="layui-bg-red" />
                    <p class="price size2">市场价：<span class="" th:text="${product.marketPrice}"></span></p>
                    <hr class="layui-bg-red" />
                    <p class="price size4">卖家用户名为：<span style="color: red"  th:text="${sellerVo.username}"></span>,卖家信誉：<span style="color: red"  th:text="${sellerVo.reputation}"></span></p>
                    <p ><button onclick="addCart()" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger">加入购物车</button></p>
                    <p ><button onclick="connection()" class="layui-btn layui-btn-lg layui-btn-radius layui-btn">与卖家交流</button></p>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-top: 50px;text-align: center;">
            <fieldset class="layui-elem-field" >
                <legend style="font-weight: 700"><i class="fa fa-tree" style="color: #FF5722;"></i>商品描述<i class="fa fa-tree" style="color: #FF5722;"></i></legend>
                <div class="layui-field-box desc">
                    <p th:text="${product.desc}"></p>
                    <hr class="layui-bg-green" />
<!--                    <img class="xiaoguo" th:src="${descp}" th:each=" descp:${#strings.listSplit(item.desp.decript,',')}"/>-->
                </div>
            </fieldset>
        </div>
    </div>
    <div th:if="${descImg}">
        <img class="img_responsive"  style="margin: auto" th:src="${descp}" th:each=" descp:${#strings.listSplit(descImg.imgUrl,',')}"/>
    </div>

    <script>
        //        <![CDATA[
        function addCart() {
            var productId = $("#productId").val();
            if(!productId){
                layer.msg("错误！");
                return;
            }

            $.get("addCart.do?productId="+productId,function (data) {
                if (data.state==0){
                    layer.msg("添加购物车成功！");
                }else {
                    layer.msg(data.message);
                }
            });
        }

        function connection(){
            $.get("checkLogin",function (data) {
                if (data.state==0){
                    window.open('/mall/chartroom.html')//新建页面并跳转
                }else {
                    layer.msg(data.message);
                }
            });
            // location.href="/mall" 在本页面跳转
        }

        //移动端页面优化
        var device = layui.device();
        if (device.weixin || device.ios || device.android){
            $(".product_info p").attr("style","margin-left: 0;margin-bottom: 0;");
            $(".layui-btn").attr("style","width:100%");
            $(".size1").addClass("price2").removeClass("size1");
            $(".size2").addClass("price2").removeClass("size2");
            $(".size3").addClass("price2").removeClass("size3");
        }
        //        ]]>
    </script>
</div>
<!--/解析成localhost:8081/-->
<div class="test">
    <div lang="en-US" class="gitment-container gitment-editor-container">
<!--        <form action="context" method="post" >-->
        <div class="gitment-editor-main" >
            <div class="gitment-editor-header">
                <nav class="gitment-editor-tabs">
                    <button class="gitment-editor-tab gitment-selected">留言</button>
                </nav>
            </div>

            <div class="gitment-editor-body">
                <div class="gitment-editor-write-field">
                    <textarea placeholder="看对眼就留言，问问更多细节" title="Login to Comment" name="context" id="contentText"></textarea>
                </div>
                <div class="gitment-editor-preview-field gitment-hidden">
                    <div class="gitment-editor-preview gitment-markdown"></div>
                </div>
            </div>
        </div>
        <div class="gitment-editor-footer">
<!--            <button class="gitment-editor-submit" title="Login to Comment" type="submit" >评论</button>-->
            <button class="gitment-editor-submit" title="Login to Comment" onclick="sendContext()">评论</button>
        </div>
            <input type="hidden" name="productId" th:value="${product.id}" id="Product_id"/>
<!--        </form>-->
    </div>

    <div lang="en-US" class="gitment-container gitment-comments-container" >
        <ul class="gitment-comments-list" th:each="context:${contextList}">
            <li class="gitment-comment">
                <div class="gitment-comment-main"  >
                    <div class="gitment-comment-header">
                        <a class="gitment-comment-name" th:text="${context.userName}">

                        </a>
                        &nbsp;&nbsp;
                        <span th:text="${#dates.format(context.commentTime,'YYYY-MM-dd HH:mm:ss')}"></span>
                    </div>
                    <div class="gitment-comment-body gitment-markdown"><p th:text="${context.content}"></p></div>
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    function sendContext() {
        var haha={"productId":"","context":""}
        haha.context=$("#contentText").val()
        haha.productId=$("#Product_id").val()
        $.ajax({
            type: "POST",
            url: "/mall/product/context2",
            data: haha,
            async: false,
            error: function (response) {
                alert("connection error请求发送失败");
            },
            success: function (response) {
                if (response.state == 0) {
                    // alert("添加成功！");
                    location.reload();
                } else {
                    // alert(response.message);优化样式
                    layer.msg(response.message);
                }
            }
        });

    }
</script>
<!--底部-->
<div th:replace="mall/common::foot"></div>
</body>
</html>